<template>
  <div class="app">
    <div
      class="course_contant"
      id="editresruil">
      <div class="editresruil">
          <app-input-all
            v-model="form.title"
            title="职位名称"
            placeholder='请输入职位'
          ></app-input-all>
          <app-input-all
            v-model="form.salary"
             placeholder='请输入月薪'
            title="月薪">
          </app-input-all>
          <app-cell title="所属城市" :value="address"  @goBack="showArea" />
          <app-input-all
            v-model="form.numbers"
            placeholder="请输入招聘人数"
            title="招聘人数">
          </app-input-all>
          <app-input-all
            v-model="form.education"
            placeholder="请输入经验要求"
            title="经验要求">
         </app-input-all>
      </div>
      <div class="line_title">职位描述</div>
	  <div
	  	class="position_desc"
	  >
		<appTextarea
			placeholder="输入岗位职责和要求、工作内容等"
			v-model="form.requirements" />
	  </div>
      <div class="line_title">公司福利</div>
	  <div
	  	 class="position_desc welfare"
	  >
		<appTextarea
			placeholder="请输入公司福利"
			v-model="form.welfare" />
	  </div>
    </div>
    <cover-view
      class="app-footer"
      @click="saverecruil">{{ query.status=='add'?'保存':'修改' }}
    </cover-view>
    <edit-alert ref="editAlert"/>
    <mpvue-city-picker
        themeColor="#FFD11A"
        ref="mpvueCityPicker"
        :pickerValueDefault="defaultArea"
        @onConfirm="onConfirm"
    />
  </div>
</template>

<script>
import $apiCompany from '@/api/company'
import EditAlert from '@/pages/components/editAlert'
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker'
import appInputAll from '@/components/app_input_all'
import appCell from '@/components/app_cell'
import appTextarea from '@/components/app-textarea'
export default {
	name: 'EditRecruil',
	components: {
		EditAlert,
		mpvueCityPicker,
		appInputAll,
		appCell,
		appTextarea
	},
	onLoad(val) {
		this.query = {
			...val
		}
	},
	data() {
		return {
			ceshi: '121212',
			owner_user_id: '',
			address: '',
			form: {
				title: '', // 名称
				salary: '', // 薪水
				area_id: [], //	地区ID
				numbers: '', // 人数
				requirements: '', // 要求
				education: '', // 学历
				welfare: '' // 福利
			},
			isShowAddress: false,
			query: null,
			defaultArea: [0, 0, 1]
		}
	},
	mounted() {
		if (!this.$util.isEmpty(this.query.id) && this.query.status == 'edit') {
			this.getDetail()
		}
	},
	methods: {
		formatArea(val) {
			return this.$refs.mpvueCityPicker.getDistrict(val)
		},
		showArea() {
			this.$refs.mpvueCityPicker.show()
		},
		saveSuccee() {
			this.$refs.editAlert.editalert = true
		},
		getDetail() {
			$apiCompany.detailJobJob({
				id: this.query.id
			})
				.then((res) => {
					if (res.status == 'success') {
						this.form = {
							...res.data,
							area_id: res.data.area_id.split(',')
						}
						this.address = this.formatArea(this.form.area_id)
					} else {
						uni.showToast({
							title: res.errors.message,
							icon: 'none'
						})
					}
				})
		},
		add() {
			$apiCompany.addJob({
				...this.form,
				area_id: this.form.area_id.join()
			})
				.then((res) => {
					if (res.status === 'success') {
						this.saveSuccee()
					} else {
						uni.showToast({
							title: res.errors.message,
							icon: 'none'
						})
					}
				})
		},
		edit() {
			$apiCompany.editJob({
				...this.form,
				area_id: this.form.area_id.join()
			})
				.then((res) => {
					if (res.status === 'success') {
						this.saveSuccee()
					} else {
						uni.showToast({
							title: res.errors.message,
							icon: 'none'
						})
					}
				})
		},
		choose_city() {
			this.isShowAddress = true
		},
		saverecruil() {
			if (this.$util.isEmpty(this.query.editData) && this.query.status == 'add') {
				this.add()
			} else {
				this.edit()
			}
		},
		onConfirm(val) {
			if (!this.$util.isEmpty(val)) {
				this.form.area_id = val.code
				this.address = val.label
			}
		}
	}
}
</script>

<style scoped lang="scss">
    .app {
        min-height:100%;
        padding-bottom:200px;

    }
    .editresruil {
        width: 90%;
        margin-left: 5%;
    }

    .editresruil li {
        height: auto;
        width: 100%;
    }

    #editresruil .van-cell {
        height: 110px;
        line-height: 70px;
    }
    #editresruil .lab_city{
        background: url($imgUrl + 'center/icon_right_arrow_large.png')
        right 20px center / 15px 28px no-repeat;
    }
    .line_title{
        width: 100%;
        height: 100px;
        font-size: 30px;
        line-height: 100px;
        background: #F5F5F5;
        text-indent: 9%;
    }
    .position_desc{
        padding-left: 9%;
        height: 260px;
        width: 91%;
        border: none;
        font-size: 30px;
        padding-top: 20px;
    }
    .welfare{
        height: 150px;
    }
</style>
